<template>
  <div>
    <el-descriptions ref="ruleFormRef" :column="2" direction="vertical" v-loading="isLoading">
      <el-descriptions-item width="50%" :label="titles.projectName">
        {{ isNullOrEmpty( formInline?.projectName ) }}
      </el-descriptions-item>
      <el-descriptions-item width="50%" :label="titles.productName">
        {{ isNullOrEmpty( formInline?.productName ) }}
      </el-descriptions-item>
      <el-descriptions-item width="50%" :label="titles.deviceSN">
        {{ isNullOrEmpty( formInline?.deviceSN ) }}
      </el-descriptions-item>
      <el-descriptions-item width="50%" :label="titles.alarmType">
        <el-tag :type="ALARMTYPES[formInline?.alarmType]?.type">
          {{ isNullOrEmpty( ALARMTYPES[formInline?.alarmType]?.label ) }}
        </el-tag>

      </el-descriptions-item>
      <el-descriptions-item width="50%" :label="titles.alarmLevel">
        <el-tag :type="EVENTLEVELS[formInline?.alarmLevel]?.type">
          {{ isNullOrEmpty( EVENTLEVELS[formInline?.alarmLevel]?.label ) }}
        </el-tag>
        <!-- {{ isNullOrEmpty( EVENTLEVELTEXT[formInline?.alarmLevel] ) }} -->
      </el-descriptions-item>
      <el-descriptions-item width="50%" :label="titles.alarmTitle">
        {{ isNullOrEmpty( formInline?.alarmTitle ) }}
      </el-descriptions-item>
      <el-descriptions-item width="50%" :label="titles.confirm">
        <el-tag :type="CONFIRMSTATUSTEXT[formInline?.confirm]?.type">
          {{ isNullOrEmpty( CONFIRMSTATUSTEXT[formInline?.confirm]?.label ) }}
        </el-tag>

      </el-descriptions-item>
      <el-descriptions-item width="50%" label="确认人">
        {{ isNullOrEmpty( formInline?.confirmByName ) }}
      </el-descriptions-item>

      <!-- <el-descriptions-item width="50%" :label="titles.noticeUsers">
          <span v-for="item in formInline?.noticeUsers" :key="item.id"lass="mr-[10px]">{{ isNullOrEmpty( item.nickname ) }}</span>
      </el-descriptions-item> -->
      <el-descriptions-item width="50%" :label="titles.dealStatus">
        <el-tag :type="HANDLESTATUSTEXT[formInline?.dealStatus]?.type">
          {{ isNullOrEmpty( HANDLESTATUSTEXT[formInline?.dealStatus]?.label ) }}
        </el-tag>

      </el-descriptions-item>
      <el-descriptions-item width="50%" :label="titles.createdAt">
        {{ isNullOrEmpty( formInline?.createdAt ) }}
      </el-descriptions-item>
      <el-descriptions-item width="50%" label="确认时间">
        {{ isNullOrEmpty( formInline?.confirmAt ) }}
      </el-descriptions-item>
      <!-- <el-descriptions-item width="50%" :label="titles.LastDealUser">
        {{ isNullOrEmpty( formInline?.LastDealUser ) }}
      </el-descriptions-item> -->
      <el-descriptions-item width="50%" :label="titles.place">
        {{ isNullOrEmpty( formInline?.place ) }}
      </el-descriptions-item>
    </el-descriptions>
    <el-descriptions ref="ruleFormRef" :column="1" direction="vertical" v-loading="isLoading">
      <el-descriptions-item width="100%" :label="titles.dealView">
        {{ isNullOrEmpty( formInline?.dealView ) }}
      </el-descriptions-item>
      <el-descriptions-item width="100" :label="titles.img">
        <span v-if="!formInline?.img || formInline?.img=='[]' || formInline?.img==''">
          无抓拍图片
        </span>
        <ReUpload v-else v-model:files="formInline.img" :isView="true" :limit="6"></ReUpload>

      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>
<script setup lang="ts">
import { isNullOrEmpty } from '@/utils/functions'
import { ref, reactive, onMounted } from "vue";
import ReUpload from "@/components/ReUpload/index.vue";
import {
  EVENTLEVELTEXT,
  CONFIRMSTATUSTEXT,
  HANDLESTATUSTEXT,
  ALARMTYPES,EVENTLEVELS
} from "@/constant/alarm-mangenment";
import { HANDLESTATUS, ALARMTYPE } from "@/constant/alarm-mangenment";
const isLoading = ref(false);
const props = defineProps({
  id: {
    type: String || Number,
    default: "1"
  },
  formInline: {
    type: Object,
    default: {
      img: []
    }
  }
});
const titles = {
  projectName: "所属项目", // projectName
  productName: "产品类型", // productName
  deviceSN: "设备序列号", // deviceSN
  alarmTitle: "告警事件", // alarmTitle
  confirm: "确认结果", // confirm
  alarmType: "告警类型", // alarmType
  alarmLevel: "事件等级",
  dealStatus: "处理状态", // dealStatus
  createdAt: "告警时间", // createdAt
  place: "所在位置", // place
  dealView: "处理意见",
  noticeUsers: "通知人员", //通知人员
  img: "抓拍图片", // img
  LastDealUser: "最后处理人"
};
// const formInline = ref({
//   productName: "", // productName
//   deviceSN: "", // deviceSN
//   alarmTitle: "", // alarmTitle
//   confirm: "", // confirm
//   alarmType: "", // alarmType
//   dealStatus: "", // dealStatus
//   createdAt: "", // createdAt
//   alarmLevel: "",
//   dealView:"",
//   noticeUsers:"",
//   LastDealUser:"",
//   img:""
// });
onMounted(() => {
  // isLoading.value = true;
  // getInfo({ id: props.id }).then(res => {
  //   isLoading.value = false;
  //   if (res.code == 200) {
  //     formInline.value = res.result;
  //   }
  // });
});
</script>
